<template>
  <div class="index" >
    <el-container>
      <el-header height="80px" style="z-index: 4">
        <div class="head-logo">
          <span class="detec"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ZTY 检测
        </div>
        <div class="right_nav">
          <i class="iconfont icon-sousuoxiao search-logo" :class="{'searching':searching}"></i>
          <input class="search-box" @focus="searching=true" @blur="searching=false"></input>
          <span class="iconfont icon-xiaoxi msg"></span>
          <span class="iconfont icon-084tuichu logout" @click="logoutHint"></span>
          <span class="iconfont icon-icon_renwujincheng task"></span>
        </div>
      </el-header>
      <div class="nav_"></div>
      <el-container :style="defaultHeight">
        <el-aside width="18%" style="z-index: 2">
          <el-scrollbar class="page-scroll">
            <div class="card_">
              <div class="pic"></div>
              <span class="name">Dr.{{doctorInfo.name}}</span>
              <div class="info_div">
                <i class="iconfont icon-a-youjianchakanyoujianfasongyoujianshouyoujian-06 info1"></i>
                <router-link to="/index/profile">
                  <i class="iconfont icon-profile info2"></i>
                </router-link>
                <router-link to="/index/test">
                  <i class="iconfont icon-zhexiantu info3"></i>
                </router-link>
                <i class="iconfont icon-richeng info4"></i>
              </div>
            </div>
            <div class="line"></div>
            <el-menu>
              <el-submenu index="1">
                <template slot="title"><i class="el-icon-s-data"></i>日程</template>
                <el-menu-item-group>
                  <el-menu-item index="1-1">选项1</el-menu-item>
                  <el-menu-item index="1-2">选项2</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="2">
                <template slot="title"><i class="el-icon-s-finance"></i>邮箱</template>
                <el-menu-item-group>
                  <el-menu-item index="3-1">系统通知</el-menu-item>
                  <el-menu-item index="3-2">工作邮件</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="3">
                <template slot="title"><i class="el-icon-user"></i>患者管理</template>
                <el-menu-item-group>
<!--                  这个地方缺少处理方法-->
                  <el-menu-item index="2-1" >预约管理</el-menu-item>
                  <el-menu-item index="2-2" @click="goPatientList">挂号管理</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="4">
                <template slot="title"><i class="el-icon-data-analysis"></i>AI辅助诊断</template>
                <el-menu-item-group>
                  <el-menu-item index="3-1" @click.native="goDetection">智能检测</el-menu-item>
                  <el-menu-item index="3-2">诊断数据分析</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="5">
                <template slot="title"><i class="el-icon-data-line"></i>数据仓库</template>
                <el-menu-item-group>
                  <el-menu-item index="3-1">仪表盘</el-menu-item>
                  <el-menu-item index="3-2">管理仓库</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </el-scrollbar>
        </el-aside>
        <div class="left_body" :style="defaultHeight"></div>
        <el-main>
          <div class="content" :style="defaultHeight">
            <div class="go">
              <transition name="el-fade-in-linear">
                <router-view></router-view>
              </transition>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import {request} from "../api/request";
import Qs from 'qs'
export default {
  name: "Index",
  data() {
    return {
      isLogin: false,
      defaultHeight: {
        height: ""
      },
      activeName: 'first',
      searching: false,
      doctorInfo: {},
    };
  },
  inject:[
    'reload'
  ],
  methods: {
    //定义方法，获取高度减去头尾
    getHeight() {
      this.defaultHeight.height = window.innerHeight - 80 + "px";
    },
    goDetection() {
      this.$router.push('/index/detection')
    },
    // goPatientProfile() {
    //   this.$router.push('/index/patientInfo')
    // },
    goPatientList() {
      this.$router.push('/index/patientlist')
    },
    logoutHint() {
      this.$confirm('正在登出系统, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        this.$message({
          type: 'info',
          message: '正在登出...'
        });
        window.localStorage.removeItem('vuex');
        window.localStorage.removeItem('token');
        window.localStorage.removeItem('cur_activity');
        window.localStorage.removeItem('wave_path');
        window.localStorage.removeItem('cur_step_status');
        window.localStorage.removeItem('cur_active');
        setTimeout(() => {
          this.$router.push("/home");
          this.reload();
        }, 500);

      }).catch(() => {
      });
    }
  },
  // 此处验证用户的登录信息
  created() {
    //页面创建时执行一次getHeight进行赋值，顺道绑定resize事件
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
    let that = this;
    request({
        url: 'user/doctor/auth/',
        method: 'post',
      headers: {
        'Authorization': window.localStorage.getItem("token")
      },
    }).then(function (data) {
      data = data.data;
      if (data.code === 200) {
        that.isLogin = true;
      } else {
        that.$message.error("登录超时，请重新登录");
        that.$router.push('/user/login');
      }
    }).catch(function (err) {
      that.$message.error("登录错误，请重新登录");
      that.$router.push('/user/login');
    })
  },
  mounted() {
    this.doctorInfo = this.$store.getters.getDoctorInfo;
    },
  watch: {
    userinput(val, oldval) {
      if(val) {
        this.isicon = false
      }
      else {
        this.isicon = true
      }
    },
    $route() {
      const cur_path = this.$route.name;
      window.localStorage.setItem("cur_activity", cur_path);

      this.active = 0;
      this.step_status = ["process", "wait", "wait"];

      window.localStorage.setItem("cur_active", this.active);
      window.localStorage.setItem("cur_step_status", JSON.stringify(this.step_status));
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.index {
  width: 100%;
  height: 100%;
}
.el-header {
  background-color: transparent;
  color: #333;
  text-align: left;
  line-height: 80px;
  padding: 0;
}
.nav_ {
  width: 100%;
  position: absolute;
  height: 80px;
  background-color: transparent;
  z-index: 3;
  box-shadow: rgba(0, 0, 0, 0.15) 0 0 20px 0;
}
.right_nav {
  display: inline-block;
  width: 82%;
  height: 99.8%;
  /*overflow: hidden;*/
  /*background-color: lightsalmon;*/
  background: linear-gradient(to right, #f7f5f8, #f8f7fc, #f4f9ff);
}
.head-logo {
  display: inline-block;
  /*overflow: hidden;*/
  width: 18%;
  text-align: center;
  height: 100%;
  line-height: 80px;
  font-weight: 600;
  font-size: 20px;
}
.el-aside {
  background-color: white;
  color: #333;
  text-align: center;
  line-height: 200px;
}
.el-main {
  background-color: transparent;
  color: #333;
  text-align: center;
  line-height: 160px;
  padding: 0;
}
.page-scroll {
  height: 100%;
}
.page-scroll .el-scrollbar__wrap {
  overflow-x: hidden;
}
body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
input {
  background:none;
  outline:none;
  border:none;
}
.search-box {
  margin-left: 4%;
  height: 46px;
  border-radius: 22px;
  border: 1px solid #E3E3E3;
  padding-left: 15px;
  transition: .3s;
}
.search-box:focus {
  background-color: white;
}
.search-logo {
  position: absolute;
  color: #c2c2c9;
  margin-left: 15.6%;
  font-size: 14px;
}
.searching {
  color: #424242;
}
.msg {
  display: inline-block;
  margin-left: 50%;
  font-size: 20px;
  transition: .3s;
}
.msg:hover, .logout:hover, .task:hover {
  color: #1362FC;
}
.logout {
  display: inline-block;
  font-size: 18px;
  margin-left: 2.8%;
  transition: .3s;
}
.task {
  display: inline-block;
  font-size: 20px;
  margin-left: 2.8%;
  transition: .3s;
  font-weight: 600;
}
.detec {
  display: inline-block;
  width: 36px;
  height: 36px;
  z-index: 2;
  position: absolute;
  background-image: url("../assets/detection.png");
  background-size: cover;
  margin-top: 20px;
}
.left_body {
  width: 18%;
  height: 100%;
  background-color: rgba(255, 240, 245, 0.41);
  position: absolute;
  z-index: 1;
  box-shadow: rgba(0, 0, 0, 0.15) 0 14px 20px 0;
}
.card_ {
  width: 100%;
  height: 226px;
  background-color: white;
  border: none;
  overflow: hidden;
}
.pic {
  overflow: hidden;
  width: 84px;
  height: 84px;
  margin: 40px auto;
  border-radius: 42px;
  border: 4px solid white;
  background-color: lavenderblush;
  background-image: url("../assets/me.png");
  background-size: cover;
  margin-bottom: 10px;
  box-shadow: rgba(0, 0, 0, 0.15) 0 0 15px 0;
}
.name {
  display: block;
  width: 100px;
  line-height: 30px;
  height: 30px;
  letter-spacing: 1px;
  /*background-color: lightsalmon;*/
  margin: 0 auto;
  font-size: 20px;
}
.info_div {
  position: relative;
  width: 150px;
  height: 24px;
  /*background-color: lightcyan;*/
  margin: 18px auto;
  /*overflow: hidden;*/
  text-align: left;
}
.info1, .info2, .info3, .info4 {
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  /*background-color: lightcoral;*/
  margin-right: 8px;
  margin-left: 0;
  color: #333333;
  font-size: 16px;
  overflow: hidden;
  margin-top: 0;
  position: absolute;
  transition: .3s;
}
.info2 {
  margin-left: 28%;
}
.info3 {
  margin-left: 57%;
}
.info4 {
  margin-left: 86%;
  font-weight: 600;
}
.info1:hover, .info2:hover, .info3:hover, .info4:hover {
  color: #1362FC;
}
.line {
  width: 90%;
  height: .5px;
  background-color: #E0E0E0;
  margin: 0 auto;
  margin-bottom: 5px;
}
.content {
  /*display: table;*/
  width: 100%;
  background-color: #F4F6F9;
  overflow-y: auto;
}
.go {
  width: 90%;
  margin: 0 auto;
  margin-top: 40px;
  /*background-color: lavenderblush;*/
  margin-bottom: 20px;
}
.el-submenu i {
  transition: .3s;
}
::v-deep .el-submenu:hover .el-submenu__title {
  color: black;
}
::v-deep .el-submenu:hover i {
  color: black;
}
.el-button {
  background-color: #1362FC;
}
</style>